<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { numFormatThousands } from '@/vehicle-ui/utils/tools.js'
  const props = defineProps({
    amount: {
      type: Object,
    },
  })
  const renderunit = (data) => {
    if (data) {
      return data < 0 ? data * -1 + '%' : data + '%'
    } else {
      return '-'
    }
  }
  const dataAmount = ref([])
  watch(
    () => props.amount,
    (newVal) => {
      if (newVal) {
        const data = [
          {
            name: '总资产',
            tooltip: [
              '总资产：车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
              '车辆数：运营状态为空闲可租、租赁中、运维中、已借出的车辆数之和',
            ],
          },
          {
            name: '总收入',
            tooltip: [
              '财务模块下短租对账、自驾长租费用、违章费用、调车结算、车辆购置费结算中所有已收款的费用之和',
              '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总收入的同比增长率',
              '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总收入的环比增长率',
            ],
          },
          {
            name: '总支出',
            tooltip: [
              '财务模块下短租对账、自驾长租费用、违章费用、运维结算、调车结算、车辆购置费结算以及业务模块下的运营成本中所有已付款的费用之和',
              '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总支出的同比增长率',
              '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总支出的环比增长率',
            ],
          },
          {
            name: '总利润',
            tooltip: [
              '总利润=总收入 - 总支出',
              '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总利润的同比增长率',
              '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总利润的环比增长率',
            ],
          },
        ]
        dataAmount.value = data.map((item, index) => {
          if (item.name === '总资产') {
            return Object.assign(item, newVal.car)
          } else if (item.name === '总收入') {
            return Object.assign(item, newVal.totalRevenue)
          } else if (item.name === '总支出') {
            return Object.assign(item, newVal.totalExpenditure)
          } else {
            return Object.assign(item, newVal.totalProfit)
          }
        })
      }
    },
    { immediate: true },
  )
  const rendertooltip = (tooltip) => {
    if (tooltip.length > 10) {
      let regex = /.{1,10}/g
      return tooltip.match(regex)
    } else {
      let arr = []
      arr.push(tooltip)
      return arr
    }
  }
</script>

<template>
  <view class="flex wrap contentdatastatics">
    <view class="datastatics" :class="`datastatics_${index + 1}`" v-for="(item, index) in dataAmount" :key="item.name">
      <view class="name flex">
        {{ item.name }}
        <ve-tooltip :placement="Array.isArray(item.tooltip) ? 'bottom' : 'top-start'">
          <template #content>
            <view v-if="Array.isArray(item.tooltip)">
              <view v-for="tip in item.tooltip" :key="tip">
                <view v-for="title in rendertooltip(tip)" :key="title">{{ title }}</view>
              </view>
            </view>
            <view v-else>
              {{ item.tooltip + item.count }}
            </view>
          </template>
          <ve-icon class="ml16 headertip" name="headertip" size="24" />
        </ve-tooltip>
      </view>
      <view class="count-view mg14">
        <text class="count">{{ numFormatThousands(item.data) }}</text>
        <text class="ml16">元</text>
      </view>
      <view class="rate-view flex" v-if="index > 0">
        <view class="mr20">
          <view class="flex">
            同比
            <ve-icon v-if="item.lastYearRate > 0" class="iconmg" name="dataup" size="18" />
            <ve-icon v-if="item.lastYearRate < 0" name="datadown" class="iconmg" size="18" />
            {{ renderunit(item.lastYearRate) }}
          </view>
        </view>
        <view>
          <view class="flex">
            环比
            <ve-icon v-if="item.lastCycleRate > 0" class="iconmg" name="dataup" size="18" />
            <ve-icon v-if="item.lastCycleRate < 0" name="datadown" class="iconmg" size="18" />
            {{ renderunit(item.lastCycleRate) }}
          </view>
        </view>
      </view>
      <view class="car-count" v-else>
        <view class="flex"> 车辆数：{{ item.count }}辆 </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .flex {
    display: flex;
  }
  .wrap {
    flex-wrap: wrap;
  }
  .iconmg {
    margin: 5rpx 8rpx 0 8rpx;
  }
  .ml16 {
    margin-left: 16rpx;
  }
  .mg14 {
    margin: 14rpx 0;
  }
  .mr20 {
    margin-right: 20rpx;
  }
  .headertip {
    margin-top: 2rpx;
  }
  .contentdatastatics {
    .datastatics_1 {
      background-image: url('../../static/images/data1.png') !important;
      background-size: cover;
    }
    .datastatics_2 {
      background-image: url('../../static/images/data2.png') !important;
      background-size: cover;
      margin: 0 0 20rpx 20rpx;
    }
    .datastatics_3 {
      background-image: url('../../static/images/data4.png') !important;
      background-size: cover;
      margin-right: 20rpx;
    }
    .datastatics_4 {
      background-image: url('../../static/images/data3.png') !important;
      background-size: cover;
    }
    .datastatics {
      width: 48%;
      height: 176rpx;
      padding: 16rpx 0 16rpx 24rpx;
      border-radius: 10rpx;
      .name {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
      }
      .count-view {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 28rpx;
      }
      .count {
        font-size: 40rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 48rpx;
      }
      .rate-view {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;
      }
      .car-count {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;
      }
    }
  }
</style>
